<template>
  <div class="goodsmanage-compoents">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="商品搜索：">
        <el-input v-model="formInline.user" placeholder="请输入" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="medium" class="goodsmanage-btn-color" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="goodsmanage-btn">
      <el-button type="primary" icon="el-icon-circle-plus-outline" size="medium" class="custom-button" @click="goodsmanageAdd">新增</el-button>
      <el-button size="medium" class="custom-button2" type="primary" @click="goodsmanageDerive">导入数据</el-button>
    </div>
    <!-- 表单 -->
    <div class="WorkorderForm-main">
      <el-table
        :header-cell-style="{background:'#f3f6fb'}"
        class="customer-table"
        :data="tableData"
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column
          prop="classId"
          label="序号"
          width="80"
        >
          <template slot-scope="{$index}">
            <span>{{ page.pageSize * (page.pageIndex -1 ) + $index+1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="brandName"
          label="商品名称"
        />
        <el-table-column
          prop="skuImage"
          label="商品图片"
        />
        <el-table-column
          prop="skuName"
          label="品牌"
        />
        <el-table-column
          prop="unit"
          label="规格"
        />
        <el-table-column
          prop="price"
          label="商品价格"
        />
        <el-table-column
          prop="skuName"
          label="商品类型"
        />
        <el-table-column
          prop="createTime"
          label="创建日期"
        />
        <el-table-column
          label="操作"
          width="100"
        >
          <template slot-scope="{row}">
            <el-button type="text" size="medium" @click="updateAdd(row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="Pagination">
        <div class="text">
          <span>共{{ total }}条数据</span>
          <span>第{{ page.pageIndex }}/{{ totalPage }}页</span>
        </div>
        <div class="btn">
          <el-button :disabled="page.pageIndex==1" @click="btnPre">上一页</el-button>
          <el-button @click="btnNext">下一页</el-button>
        </div>
      </div>
    </div>
    <!--弹窗 -->
    <goodsAdd v-if="goodsAddFlag" v-model="goodsAddFlag" :row.sync="row" @updateAcc="goodsManageApiList" />
    <goodsDerive v-model="goodsDeriveFlag" />
  </div>
</template>
<script>
import goodsAdd from './components/goodsAdd.vue'
import goodsDerive from './components/goodsDerive'
import { goodsManageApi } from '../../api/goodsclass'
export default {
  name: 'Goodsmanage',
  components: {
    goodsAdd,
    goodsDerive
  },
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],
      goodsAddFlag: false,
      goodsDeriveFlag: false,
      total: '',
      totalPage: '',
      page: {
        pageIndex: '1',
        pageSize: '5'
      },
      row: { }
    }
  },
  created() {
    this.goodsManageApiList()
  },
  methods: {
    onSubmit() {
      console.log('submit!')
      this.goodsManageApiList(this.formInline.user)
    },
    // 新增
    goodsmanageAdd() {
      this.goodsAddFlag = true
    },
    // 修改
    updateAdd(row) {
      this.goodsAddFlag = true
      this.row = JSON.parse(JSON.stringify(row))
    },
    // 导出
    goodsmanageDerive() {
      this.goodsDeriveFlag = true
    },
    // 列表数据
    async  goodsManageApiList(obj) {
      // console.log(1111111)
      let res
      if (obj) {
        // 收索
        // console.log(22222)
        res = await goodsManageApi({ skuName: obj })
      } else {
        // console.log(3333)
        res = await goodsManageApi(this.page)
      }
      console.log(res, 8888888)
      this.tableData = res.data.currentPageRecords
      // console.log(this.tableData, 66666666666666666)

      this.total = res.data.totalCount
      this.totalPage = res.data.totalPage
    },
    // 下一页
    btnNext() {
      if (this.page.pageIndex < this.totalPage) {
        this.page.pageIndex++
        this.goodsManageApiList()
      }
    },
    // 上一页
    btnPre() {
      this.page.pageIndex--
      this.goodsManageApiList()
    }
  }
}
</script>
<style lang='scss'  scoped>
.goodsmanage-compoents{
::v-deep   .demo-form-inline{
    .el-input__inner{
      height: 36px;
      line-height: 36px;
    }
      .el-form-item__label{
        font-weight: 400;
      }
  }
  .goodsmanage-btn-color{
     width: 80px;
    height: 36px;
    padding: 5px;
    border: 0px solid #fff;
   background-color: #5f84ff;
  }
    .goodsmanage-btn-color:hover {
    background-color: #5373e0;
  }
    .goodsmanage-btn{
    margin-bottom: 20px;
  // background-color: green;
  }
    .custom-button {
    width: 80px;
    height: 36px;
    padding: 5px;
    border: 0px solid #fff;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    }
   .custom-button:hover{
 background: linear-gradient(135deg,#ff7d43,#db3602)!important;
    }
        .custom-button2{
      color: #655b56;
    width: 80px;
    height: 36px;
    padding: 5px;
    border: 0px solid #fff;
    background-color: #fbf4f0;
    }
    .custom-button2:hover{
    background-color: #f3e7e1;
    }
     .WorkorderForm-main{
  width: 100%;
  .el-table td, .el-table th.is-leaf{
    border-bottom: 0px solid #EBEEF5;
  }
  .Pagination{
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
  .text{
    color: #dbdfe5;
    span:nth-child(1){
      padding-right: 7px;
    }
  }
}
}
}
</style>
<style lang="scss">
.goodsmanage-compoents{

 .btn{
    button{
      width: 70px;
      height: 32px;
      padding: 0;
      // border: 1px solid transparent;
      font-size: 13px;
      color: #666560;
      background-color: #dbdbdb;
      &:nth-child(1){
        margin-right: 20px;
      }
    }
  }
}

</style>
